<template>
  <div class="box">
    <a-layout class="mlogincontent">
      <a-form
        class="mloginform"
        :model="manager"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-typography-title style="text-align: center"
          >管理员登录</a-typography-title
        >
        <a-form-item label="管理员账号" :wrapper-col="{ span: 15, offset: 4 }">
          <a-input v-model:value="manager.man_id" />
        </a-form-item>

        <a-form-item label="管理员密码" :wrapper-col="{ span: 15, offset: 4 }">
          <a-input-password
            v-model:value="manager.password"
            @keyup.enter="mlogin"
          />
        </a-form-item>

        <a-form-item :wrapper-col="{ span: 15, offset: 8 }">
          <a-row type="flex" justify="space-between">
            <a-button type="primary" @click="mlogin">登录</a-button>
            <a-button type="primary" @click="cancel">取消</a-button>
            <a-button type="primary" @click="userlogin">用户登录</a-button>
          </a-row>
        </a-form-item>
      </a-form>
    </a-layout>
  </div>
</template>
<script setup>
import { reactive } from "vue";
import { post, setLocalToken, tip } from "@/common";

import { useRouter } from "vue-router";

const router = useRouter(); //获取用户路由

//reactive 用于双向绑定响应
const manager = reactive({
  man_id: "",
  password: "",
});

const mlogin = () => {
  console.log("管理员登录!");
  //then方法仅接收成功操作的结果
  post("/security/m_login", manager).then((res) => {
    console.log(res);

    tip.success("登录成功！");

    const token = res.data; //获取返回的令牌

    //将令牌缓存本地
    setLocalToken(token);

    //跳转至home路由
    router.push({ path: "/admin/cinema" });
  });
};

const cancel = () => {
  //跳转至home路由
  router.push({ path: "/admin/cinema" });
};

const userlogin = () => {
  //跳转至userlogin路由
  router.push({ path: "/login" });
};

//一行24列
const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 10,
};
</script>

<style>
.mlogincontent {
  /* 加载背景图 */
  background-image: url("m-loginbac.png");
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;

  width: calc(100vw);
  height: calc(100vh);

  justify-content: center;
  align-items: center;
}
.mloginform {
  background-color: #fff;
  min-width: 600px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
  padding: 30px 20px;
}
</style>